<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>已安装监控管理</title>
	<link rel="stylesheet" href="../css/common2.css">
	<link rel="stylesheet" href="../css/motai3.css">
	<style>
		.ib {
			display: inline-block;
		}

		.mid {
			vertical-align: middle;
		}

		.modal-data5,
		.modal-content5 {
			min-height: unset;
			height: unset;
		}

		.modal-content5 .layui-input {
			width: 50%;
			margin: 0 auto;
		}

		.show {
			visibility: visible !important;
		}

		.init {
			padding-left: unset;
			width: unset;
		}

		.long-background-img {
			width: 120px;
			height: 35px;
			background: url("../image/enter_longer.png") no-repeat center center !important;
		}
	</style>
</head>

<body>
	<br>

	<div id="vue-root">
		<form enctype="multipart/form-data" id="form" ref="form" style="display: none;">
			<input type="file" name="file" id="file" @change="importExcel" ref="file"
				accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel">
		</form>
		<div>
			<div class="refresh action-buttons" onclick="location.reload()">刷新</div>

			<select name="drop1" class="search" id="SClass" v-model="search.classesId"
				style="position: absolute; right: 420px;">
				<option :value="undefined">请选择班级</option>
				<option v-for="classes in classess" :key="classes.id" :value="classes.id" v-text="classes.name">
				</option>
			</select>

			<input class="search" placeholder="请输入学生姓名" v-model="search.name"
				style="position: absolute; right: 260px;max-width: 120px;height: 33px;">
			<input class="search" placeholder="请输入直播码" v-model="search.code"
				style="position: absolute; right: 100px;max-width: 120px;height: 33px;">
			<img class="mid" src="../image/search.png" height="35" width="35" @click="getData"
				style="position: absolute; right:3% ;">
		</div>

		<div class="table">
			<table class="table_top">
				<thead>
					<tr>
						<th class="one">
							<input type="checkbox" class="check-box" v-model="all">序号
						</th>
						<th class="two">姓名</th>
						<th class="two">班级</th>
						<th class="two">直播码</th>
						<th class="two">截止日期</th>
						<th class="two">兑换码使用状态</th>

					</tr>
				</thead>
				<tbody id="list">
					<tr v-for="(redeemcode,index) in list" :key="redeemcode.id">
						<td class="one">
							<input type="checkbox" class="check-box" v-model="redeemcode.checked">
							<span v-text="index+1"></span>
						</td>
						<td class="two" v-text="redeemcode.studentName"></td>
						<td class="two" v-text="redeemcode.classesName"></td>
						<td class="two" v-text="redeemcode.code"></td>
						<td class="two" v-text="redeemcode.deadline"></td>
						<td class="two" v-text="getStatus(redeemcode)"></td>

					</tr>

				</tbody>
			</table>
		</div>
		<div class="delete" @click="batchDelete" v-if="total>1">批量删除</div>
		<div class="delete long-background-img" @click="show=true" v-if="role==0">批量设置截止日期</div>
		<a href="/excel/redeemcode_student.xls">
			<div class="delete long-background-img">下载导入模板</div>
		</a>
		<label class="delete long-background-img" for="file">批量分配兑换码</label>
		<div class="delete" @click="exports">导出明细</div>
		<div style="visibility: hidden" :class="{show:show}" v-if="role==0">
			<div class="model-table5">
				<div class="modal-data5">
					<div class="modal_title">设置截止日期
						<span @click="show=false">x</span>
					</div>
					<div class="modal-content5 ">
						<input class="layui-input" id="layday">

					</div>
					<button class="btn-default" @click="show=false">取消</button>
					<button class="btn-primary" @click="submit">确定</button>
				</div>
			</div>
		</div>

		<ul class="pagination" v-if="pages>1">
			<li>
				<a v-if="pageNum!=1" @click="pageNum=1">«</a>
				<a class="pages-jump" v-if="pageNum!=1" @click="pageNum--">‹</a>
				<a v-text="pageNum"></a>
				<a class="pages-jump" v-if="pageNum!=pages" @click="pageNum++">›</a>
				<a v-if="pageNum!=pages" @click="pageNum=pages">»</a>
			</li>
		</ul>

	</div>

	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>

	<script src="/scriptZIP/dayjs.min.js"></script>

	<script src="/scriptZIP/dayjs.min.js"></script>


	<script src="/lib/laydate/laydate.js"></script>

	<script src="/js/common.js"></script>
	<script src="/js/list.js"></script>
	<script>
		var app = new Vue(merge({
			data: {
				classess: [],
				urls: {
					del: '/pc/redeemcode/del',
				},
				show: false,
				date: null,
				role: 2
			},
			created: function () {
				var schoolId = top_params().id;
				if (!schoolId) {
					alert('未知学校');
					throw '未知学校';
				}
				this.schoolId = schoolId;
				axios.get('/pc/classes/all/' + schoolId).then(function (res) {
					this.classess = res.data;
				}.bind(this));
				this.urls.list = '/pc/redeemcode/list1/' + schoolId;
				this.urls.imports = '/pc/redeemcode/import/' + schoolId;
				this.getData();
				axios.get('/pc/user/role').then(function (res) {
					this.role = res.data;
				}.bind(this));
			},
			methods: {
				exports: function () {
					var q = Qs.stringify(this.search);
					if (q) q = '?' + q;
					location.href = '/pc/redeemcode/export/' + this.schoolId + q;
				},
				getStatus: function (redeemcode) {
					var status = redeemcode.used ? '已使用' : '未使用';
					if (redeemcode.deadline && dayjs(redeemcode.deadline)
						.isBefore(dayjs().subtract(1, 'day'))) status = '已过期/' + status;
					return status;
				},
				submit: function () {
					this.show = false;
					if (this.checkedIds.length === 0) {
						alert('请至少选择1个');
						return;
					}
					axios.post('/pc/redeemcode/deadline?date=' + this.date, this.checkedIds).then(function (res) {
						this.getData();
					}.bind(this));
				}
			},
			watch: {
				show: function (newValue, oldValue) {
					if (newValue) {
						laydate.render({
							elem: '#layday',
							done: function (value, date, endDate) {
								this.date = value;
							}.bind(this)
						});
					}
				}
			}
		}));
	</script>
</body>

</html>